<style lang="scss" scoped="">

  @import '../style.scss';

  .demo-Circle-custom{
    & h1{
      color: #3f414d;
      font-size: 28px;
      font-weight: normal;
    }
    & p{
      color: #657180;
      font-size: 14px;
      margin: 10px 0 15px;
    }
    & span{
      display: block;
      padding-top: 15px;
      color: #657180;
      font-size: 14px;
      &:before{
        content: '';
        display: block;
        width: 50px;
        height: 1px;
        margin: 0 auto;
        background: #e0e3e6;
        position: relative;
        top: -15px;
      };
    }
    & span i{
      font-style: normal;
      color: #3f414d;
    }
  }
</style>
<template>
  <div class='my_card_outer_b' style="height:44vh;">
    <div class='my_card_b' style="height:42vh;" >
      <div class="my_card_title_b">
        <Icon type="md-stats"  color='rgb(67,158,279)' class="my_card_icon"/>租户整体健康度
      </div>
      <div style="height:37vh;" ref="myEchart">


      </div>
    </div>

  </div>

</template>

<script>
  import echarts from 'echarts'
  export default {
    name:'b_general_health',
    watch: {
      listen_general_data: function(val, oldVal) {
//         console.log('new: %s, old: %s', val, oldVal)
        this.initChart(val)
      }
    },
    computed: {
      listen_general_data() {
        return this.$store.state.general_data;
      }
    },
    mounted() {
      if (this.$store.state.general_data!=0){
        this.initChart(this.$store.state.general_data);
      }


    },
    methods:{
      initChart(data){
        var myChart= echarts.init(this.$refs.myEchart);
        var option=getOption();
        option.series[2].data[0].value = Math.round(data.general_health.health);
        option.series[2].data[1].value = 100-option.series[2].data[0].value;
        option.series[1].data[0].value = Math.round(data.general_health.object_score);
        option.series[1].data[1].value=100-option.series[1].data[0].value;
        option.series[0].data[0].value = Math.round(data.general_health.subject_score);
        option.series[0].data[1].value=100-option.series[0].data[0].value
        myChart.setOption(option, true);
      }
    }
  }


  function getOption(){
    let hv=document.body.clientHeight/100;

    let option = {
      legend: {
        left: 1.5 * hv,
        orient: 'vertical',
        top:'5%',
        textStyle: {
          color: 'rgb(100,100,100)',
          fontSize:2 * hv,
        },
        data:['专家评分','客观评分','总体分数']
      },
      series: [
        {
          name:'访问来源',
          type:'pie',
          radius: ['80%', '90%'],
          label:{
            show:false
          },
          labelLine:{
            show:false
          },
          data:[

            {
              value:35,
              name:'专家评分',
              itemStyle:{
                color:'rgb(255,155,0)'
              }
            },
            {
              value:35,
              name:'-',
              itemStyle:{
                color:'rgb(200,200,200)'
              }
            }
          ]
        },
        {
          name:'访问来源',
          type:'pie',
          radius: ['60%', '70%'],
          label:{
            show:false
          },
          labelLine:{
            show:false
          },
          data:[
            {
              value:35,
              name:'客观评分',
              itemStyle:{
                color:'rgb(155,198,21)'
              }
            },
            {
              value:35,
              name:'-',
              itemStyle:{
                color:'rgb(200,200,200)'
              }
            }
          ]
        },
        {
          name:'访问来源',
          type:'pie',
          radius: ['40%', '50%'],
          label:{
            position:'center',
            fontSize:4*hv,
            formatter:function(params ){

              if(params.name=='总体分数'){
                return params.value+'分'
              }else{
                return ''
              }
            }
          },
          labelLine:{
            show:false
          },
          data:[
            {
              value:65,
              name:'总体分数',
              itemStyle:{
                color:'rgb(45,140,240)'
              }
            },
            {
              value:35,
              name:'-',
              itemStyle:{
                color:'rgb(200,200,200)'
              }
            }
          ]
        }
      ]
    };

    return option;
  }


</script>

